import React from 'react'
import './GoodsImage.css';

export default function GoodsImage() {
  let str=[
    '/goods/1.jpg',
    '/goods/2.jpg',
    '/goods/3.jpg',
    '/goods/4.jpg',
    '/goods/5.jpg'
  ]

  let [index,setIndex]=React.useState(0)

  return (
    <div className='goods-image'>
      <div className="big-image">
        <img src={str[index]} alt="" />
      </div>
      <div className="small-images">
        {/* <div className="item"><img src="/goods/1.jpg" alt='' /></div>
        <div className="item"><img src="/goods/2.jpg" alt='' /></div>
        <div className="item"><img src="/goods/3.jpg" alt='' /></div>
        <div className="item"><img src="/goods/4.jpg" alt='' /></div>
        <div className="item"><img src="/goods/5.jpg" alt='' /></div> */}
        {
          str.map((item,k)=>{
            return <div className="item" key={k} onClick={()=>{
              setIndex(k)
            }}>
              <img src={item} alt='' className={index===k?'active':null}  />
            </div>
          })
        }

      </div>
    </div>
  )
}
